<template>
   <div class="phone-list">
          <div class="vm-propanels" v-for="(v,index) in earslist" :key="index" @click="buyears">
            <div class="img-propanels">
              <img :src="v.src" alt="">
            </div>
            <div class="produce-propanels">
              <p class="p-name">
                <span v-show="v.new != ''">{{v.new}}</span>
                {{v.name}}
              </p>
              <p class="produce" v-show="v.produce != ''">{{v.produce}}</p>
              <div class="price-more">
                <p>{{v.price}}</p>
                <div class="more ">{{v.more}}</div>
              </div>
              <div class="sell-exchaange">
                <div class="sell" v-show="v.sell !=''">{{v.sell}}</div>
                <div class="exchangeO">{{v.exchangeO}}</div>
                <div class="exchangeT" v-show="v.exchangeT !=''">{{v.exchangeT}}</div>
                <div class="exchangeTH" v-show="v.exchangeTH != ''">{{v.exchangeTH}}</div>
              </div>
              <div class="assert-p">
                <p class="assert">{{v.assert}}</p>
                <p class="assertp" v-show="v.assertp != ''">{{v.assertp}}</p>
              </div>

            </div>
            
          </div>
        </div>
</template>

<script>
export default {
    data(){
    return {
     earslist:[]
    }
  },
   mounted(){
    this.$http({
      url:"http://localhost:3000/earslist",
      method:"GET"
    }).then((res)=>{
      this.earslist = res.data;
    })
   },
   methods:{
    buyears(){
      this.$router.push("/buyears")
    }
   }
}
</script>

<style scoped>
   .phone-list{
    display: flex;
    flex-direction: column;
}
   .vm-propanels{
    margin: auto;
    width: 21.8881rem;
    height: 8.9831rem;
    display: flex;
   }
   .img-propanels{
    width: 8.4625rem;
    height: 8.4625rem;
    display: flex;
   }
   .img-propanels img{
    width: 5.8587rem;
    height: 5.8587rem;
    margin: auto;
   }
   .produce-propanels{
    width: 12.375rem;
    display: flex;
    flex-direction: column;
    padding: .4125rem 0;
   }
   .p-name{
    display: flex;
    font-size: .95rem;
    align-items: center;
   }
   .p-name span{
     display: inline-block;
     width: 1.7219rem;
     height: .8225rem;
     background-color: rgb(251, 142, 142);
     color: #fff;
     font-size: .5rem;
     text-align: center;
     line-height: .8225rem;
     border-radius: .2125rem;
     margin-right: .3125rem;
   }
   .produce{
    font-size: .5rem;
    margin-top: .2rem;
    color: #999;
   }
   .price-more{
    display: flex;
    align-items: center;
    margin-top: 1.825rem;
   }
   .price-more p{
    font-size: .9rem;
    font-weight: 700;
   }
   .price-more .more{
    display: inline-block;
     width: 2rem;
     height: .9113rem;
     border-radius: .2875rem;
     border: 1px solid rgb(83, 83, 251);
     color: rgb(83, 83, 251);
     font-size: .4rem;
     text-align: center;
     line-height: .9113rem;
     margin-left: .625rem;
   }
   .sell-exchaange{
    display: flex;
    width: 13.25rem;
    /* justify-content: space-between; */
    margin-top: .3125rem;
   }
   .sell-exchaange .sell{
    background: url() no-repeat;
    width: 4.4044rem;
    height: .95rem;
    background-size: 100%;
    color: #fa2a2d;
    font-size: .4rem;
    display: block;
    font-family: Helvetica;
    margin-left: .25rem;
    text-align: center;
   }
   .sell-exchaange .exchangeO,.sell-exchaange .exchangeT,.sell-exchaange .exchangeTH{
    display: inline-block;
     /* width: 5rem; */
     height: .9113rem;
     border-radius: .2875rem;
     border: 1px solid rgb(83, 83, 251);
     color: rgb(83, 83, 251);
     font-size: .4rem;
     text-align: center;
     line-height: .9113rem;
     margin-left: .2rem;
   }
   .assert-p{
    display: flex;
    font-size: .4rem;
    color: #999;
    height: .2rem;
    margin-top: .1875rem;
    margin-left: .1875rem;
   }
   .assert-p p:nth-child(1){
      margin-right: .625rem;
   }

</style>